<template>
    <transition name="fade">
  <div style="overflow: hidden;background: #f4f4f4">
      <div class="header">
          <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
          <a class="center">确认订单</a>
      </div>
      <a class="address-panel" href="#/address">
          <img class="img" src="../../assets/map.png">
          <div class="info">
              <div class="name"><span class="pull-left">收件人：Masky</span><span class="pull-right">13000000000</span></div>
              <p class="address"><small>收货地址：广东深圳市龙岗区xxxxxxx</small></p>
          </div>
          <div class="bottom-img" :style="{background: 'url('+bottom_img+') repeat'}"></div>
      </a>
      <ul class="product-panel">
          <li class="product-detail item">
              <div class="img"><img src="../../assets/goods/1.jpg"></div>
              <div class="detail">
                  <p class="title">Nike air jordon 1 经典篮球鞋</p>
                  <p><small>颜色：黑，码数：42</small></p>
              </div>
              <div class="price-panel">
                  <p class="text-red"><small>￥</small>999.00</p>
              </div>
          </li>
          <li class="item count">
              <div class="pull-left">购买数量</div>
              <div class="pull-right">
                  <div class="count-panel">
                      <a class="dec">-</a>
                      <div  class="count"><input name="count" value="1"></div>
                      <a class="inc">+</a>
                  </div>
              </div>
          </li>
          <li class="item">
              <div class="pull-left">配送方式</div>
              <div class="pull-right">
                  快递 免邮
              </div>
          </li>
          <li class="item">
              <div class="pull-left">优惠</div>
              <div class="pull-right">
                  无
              </div>
          </li>
          <li class="item">
              <div class="pull-left">买家留言：<input type="text" name="remark" class="remark" placeholder="选填：对本次交易的说明"></div>
          </li>
      </ul>
      <div class="bottom-panel">
          <a class="sub-price">共<span class="text-red">1</span>件，合计：<span class="text-red">￥<span class="price">999</span>.00</span></a>
          <a class="order-btn" v-on:click="go-order">提交订单</a>
      </div>
  </div>
    </transition>
</template>

<script>
export default {
    name: 'confirm_order',
    data () {
        return {
			bottom_img:require('@/assets/b1.jpg'),
        }
    },
    methods:{
		back:function ()
		{
			this.$router.back();
		}
    }

}
</script>

<style scoped>

    .header{
        background: linear-gradient(to right bottom,#ff1100,#E30000);
        box-shadow: 0 0 5px #999;
    }
    .header .center{
        color: #fff;
    }
    .address-panel{
        margin-top: 60px;
        position: relative;
        overflow: hidden;
        height: 75px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 7px;
        background: #fff;
        display: block;
    }
    .address-panel .img{
        position: absolute;
        width: 16px;
        height: 16px;
        top:24px;
        left: 18px;
    }
    .bottom-img{
        margin: 5px 0;
        width: 100%;
        height: 5px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .address-panel .info{
        height: 100%;
        margin-left: 40px;
    }
    .address-panel .info .name{
        overflow: hidden;
        padding: 10px 10px 5px 10px;
    }
    .address-panel .info .address{
        padding: 0 10px 10px 10px;
    }
    .bottom-panel{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        border-top: 1px solid rgba(0,0,0,0.1);
        overflow: hidden;
    }
    .bottom-panel .order-btn{
        display: block;
        float: right;
        width: 50%;
        background: #E30000;
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
    .product-panel{
        border-bottom: 1px solid #ccc;
        margin-bottom: 7px;
    }
    .product-panel li{
        background: #fff;
        display: block;
        padding: 15px;
    }
    .product-panel li.count{
        border-bottom: 1px solid #ccc;
        margin-bottom: 7px;
    }
    .product-panel .product-detail{
        overflow: hidden;
        position: relative;
        padding: 0;

    }
    .product-panel .product-detail .img{
        position: absolute;
        width: 70px;
        height: 70px;
        left: 10px;
    }
    .product-panel .product-detail .img img{
        width: 100%;
    }
    .product-panel .product-detail .detail{
        margin-left: 80px;
        margin-right: 95px;
        height: 70px;
        padding: 10px;
    }
    .product-panel .product-detail .detail .title{
        height: 20px;
        overflow: hidden;
        display: block;
    }
    .product-panel .product-detail .price-panel{
        width: 90px;
        height: 70px;
        position: absolute;
        right: 0;
        top:0;
        padding: 10px;
    }
    .product-panel .item{
        border-bottom: 1px solid #f4f4f4;
        overflow: hidden;
        position: relative;
    }
    .product-panel .count-panel{
        position: absolute;
        height: 100%;
        width: 150px;
        padding: 5px;
        top:0;
        right: 10px;
    }
    .product-panel .count-panel .dec,.product-panel .count-panel .inc{
        height: 100%;
        padding-top: 15px;
        display: block;
        position: absolute;
        top:0;
        border: 1px solid #f4f4f4;
        text-align: center;
        width: 30px;
        background: #f4f4f4;
    }
    .product-panel .count-panel .inc{
        right: 0;
    }
    .product-panel .count-panel .count{
        height: 100%;
        margin-left: 30px;
        margin-right: 30px;
    }
    .product-panel .count-panel .count input{
        height: 100%;
        border: 0px solid #f4f4f4;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }
    .product-panel .remark{
        height: 100%;
        border: 0px solid #f4f4f4;
        padding-left: 10px;
    }
    .bottom-panel .sub-price{
        display: block;
        width: 50%;
        float: left;
        text-align: center;
        height: 100%;
        line-height: 50px;
        background: #fff;

    }
    .bottom-panel .sub-price .price{
        font-size: 1.1rem;

    }
</style>
